<template>
  <div class="wrap">
    <el-card>
      <el-table
        v-loading.body="loading"
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          :index="(page - 1) * size + 1"
          type="index"
          label="序号"
          width="100" />
        <el-table-column
          prop="questName"
          label="题干">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="show(scope.row.questId)">{{ scope.row.questName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="答题日期"
          width="120"/>
        <el-table-column
          prop="answerFalseNum"
          label="答错次数"
          width="120" />
        <el-table-column
          prop="answerFalsePersonNum"
          label="答错人数"
          width="120" />
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="page" :page-size="size" :total="total" layout="prev, pager, next" @current-change="queryList" />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      title="错题详情"
      width="50%">
      <div class="dialog">
        <div><span class="key">【学科】</span> <span>{{ item.subjectName }}</span></div>
        <div><span class="key">【考试类型】</span> <span>{{ item.examType }}</span></div>
        <div><span class="key">【单元】</span> <span>{{ item.chapterName }}</span></div>
        <div>
          <span class="key">【题干】</span> <span>{{ item.title }}</span>
          <img v-if="item.titlePicUrl" :src="item.titlePicUrl" alt="titlePicUrl" class="pic">
        </div>
        <div>
          <span class="key">【选项】</span>
          A. <span v-show="!isImage(item.optiona)">{{ item.optiona }}</span> <br v-if="!isImage(item.optiona)">
          <img v-if="isImage(item.optiona)" :src="version + '/uploadFile/path/' + item.optiona" alt="optiona" class="pic"><br v-if="isImage(item.optiona)">

          <p style="margin-left: 123px;">
            <span>
              B. <span v-show="!isImage(item.optionb)">B. {{ item.optionb }}</span>
              <img v-if="isImage(item.optionb)" :src="version + '/uploadFile/path/' + item.optionb" alt="optionb" class="pic">
            </span><br>

            <span>
              C. <span v-show="!isImage(item.optionc)">{{ item.optionc }}</span>
              <img v-if="isImage(item.optionc)" :src="version + '/uploadFile/path/' + item.optionc" alt="optionc" class="pic">
            </span><br>

            <span>
              D. <span v-show="!isImage(item.optiond)">{{ item.optiond }}</span>
              <img v-if="isImage(item.optiond)" :src="version + '/uploadFile/path/' + item.optiond" alt="optiond" class="pic">
            </span><br>

            <span v-show="item.optione">
              E. <span v-show="!isImage(item.optione)">{{ item.optione }}</span>
              <img v-if="isImage(item.optione)" :src="version + '/uploadFile/path/' + item.optione" alt="optione" class="pic">
            </span>
          </p>
        </div>
        <div><span class="key">【标准答案】</span> <span>{{ item.rightAnswer }}</span></div>
        <div><span class="key">【答案解析】</span> <span>{{ item.answerParse }}</span></div>
        <div><span class="key">【答错次数】</span> <span>{{ item.falseQuestNum }}</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { EXERCISE_TYPE } from '@/constants/storage'
import { VERSION } from '@/constants/uri'
const imageSuffixs = ['png', 'jpg', 'jpeg']
export default {
  data() {
    return {
      page: 1,
      size: 10,
      total: 0,
      items: [],
      item: {},
      loading: false,
      visible: false,
      version: VERSION,
      examType: sessionStorage.getItem(EXERCISE_TYPE)
    }
  },
  mounted() {
    this.queryList(this.page)
  },
  methods: {
    show(id) {
      this.visible = true
      axios.get('/myTest/myFalseQuestInfo/' + id).then(res => {
        this.item = res
      })
    },
    handleClose() {
      this.visible = false
    },
    queryList(page = 1) {
      this.loading = true
      this.page = page
      axios.get(`/myTest/myFalseQuestListInfo/${this.examType}/all/all/${page}/${this.size}`).then(res => {
        this.loading = false
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    },
    /*
   *   答案是否是图片
   * */
    isImage(value) {
      if (!value) {
        return false
      }
      const index = value.lastIndexOf('.')
      if (!index) {
        return false
      }

      if (imageSuffixs.includes(value.substr(index + 1))) {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    padding: 20px;
  }
  .dialog {
    line-height: 2;
    p {
      margin: 0;
    }
    > div {
      margin-bottom: 10px;
    }
  }
  .key {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
    text-align: right;
  }

  .pic {
    width: 150px;
    vertical-align: middle;
  }
</style>
